<template>
  <div class="comment">
    <div class="header" id="header">
      <span>评论</span>
      <span>共{{ totalcomment }}条评论</span>
    </div>
    <!-- 发布评论 -->
    <div class="publish">
      <div class="publish_left">
        <img src="../../public\images\default_avatar.png" alt="" />
      </div>
      <div class="publish_right">
        <div class="top">
          <textarea rows="3" placeholder="评论" v-model="content"></textarea>
        </div>
        <div class="bottom">
          <div class="bottom_a">
            <span class="iconfont icon-biaoqing"></span>
            <span>@</span>
          </div>
          <div class="bottom_b">
            <span :class="{ switch: switchColor }">{{ limitnum }}</span>
            <span>评论</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 评论 -->
    <div>
      <!-- 精彩评论 -->
      <div class="wonderful" v-if="wonderfulList.length">
        <div class="wonderful_top">精彩评论</div>
        <div class="wonderful_bottom" v-for="(v, i) in wonderfulList" :key="i">
          <div class="wonderful_bottom_left">
            <img :src="v.user.avatarUrl" />
          </div>
          <div class="wonderful_bottom_right">
            <div class="wonderful_bottom_right_a">
              <span>{{ v.user.nickname }}</span
              >:<span>{{ v.content }}</span>
            </div>
            <div class="reply" v-if="v.beReplied.length">
              <span>{{ v.beReplied[0].user.nickname }}</span
              >:<span>{{ v.beReplied[0].content }}</span>
            </div>
            <div class="wonderful_bottom_right_b">
              <div class="a">
                <span>{{ timestampToTime(v.time) }}</span>
              </div>
              <div class="b">
                点赞（<span>{{ v.likedCount }}</span
                >）|<span>回复</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 最新评论 -->
      <div class="newest" v-if="newestList.length">
        <div class="newest_top">最新评论({{ totalcomment }})</div>
        <div class="newest_bottom" v-for="(v, i) in newestList" :key="i">
          <div class="newest_bottom_left"><img :src="v.user.avatarUrl" /></div>
          <div class="newest_bottom_right">
            <div class="newest_bottom_right_a">
              <span>{{ v.user.nickname }}</span
              >:<span>{{ v.content }}</span>
            </div>
            <div class="reply" v-if="v.beReplied.length">
              <span>{{ v.beReplied[0].user.nickname }}</span
              >:<span>{{ v.beReplied[0].content }}</span>
            </div>
            <div class="newest_bottom_right_c">
              <div class="a">
                <span>{{ timestampToTime(v.time) }}</span>
              </div>
              <div class="b">
                点赞（<span>{{ v.likedCount }}</span
                >）|<span>回复</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 分页 -->
      <div class="pagination">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="totalcomment"
          :page-size="limit"
          @prev-click="prev"
          @next-click="next"
          @current-change="change"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import axios from "axios";
export default {
  props: ["songSheet", "song","Album","mvinfo","VideoInfo"],
  data() {
    return {
      content: "",
      limitnum: 140,
      switchColor: false,
      // 评论总数
      totalcomment: 0,
      // 精彩评论
      wonderfulList: {
        beReplied:{
          length: 0,
        },
        user:{},
        length: 0,
      },
      // 最新评论
      newestList: {
        beReplied:{
          length: 0,
        },
        user:{},
        length: 0,
      },
      limit: 20,
      offset: 0,
    };
  },
  watch: {
    content(newValue) {
      this.limitnum = 140 - newValue.length;
      if (this.limitnum < 0) {
        this.switchColor = true;
      } else {
        this.switchColor = false;
      }
    },
  },
  methods: {
    // 获取歌单精彩评论数据
    getsongSheethotcomment() {
      axios
        .get(
          `http://127.0.0.1:3000/comment/playlist?id=${this.$route.params.id}&limit=${this.limit}&offset=${this.offset}`
        )
        .then((res) => {
          this.wonderfulList = res.data.hotComments;
        });
    },
    // 获取歌单最新评论数据
    getsongSheetnewcomment() {
      axios
        .get(
          `http://127.0.0.1:3000/comment/playlist?id=${this.$route.params.id}&limit=${this.limit}&offset=${this.offset}`
        )
        .then((res) => {
          this.totalcomment = res.data.total;
          this.newestList = res.data.comments;
        });
    },
    // 获取歌曲精彩评论数据
    getsonghotcomment() {
      axios
        .get(
          `http://127.0.0.1:3000/comment/music?id=${this.$route.params.id}&limit=${this.limit}&offset=${this.offset}`
        )
        .then((res) => {
          this.wonderfulList = res.data.hotComments;
        });
    },
    // 获取歌曲最新评论数据
    getsongnewcomment() {
      axios
        .get(
          `http://127.0.0.1:3000/comment/music?id=${this.$route.params.id}&limit=${this.limit}&offset=${this.offset}`
        )
        .then((res) => {
          this.totalcomment = res.data.total;
          this.newestList = res.data.comments;
        });
    },
    // 获取专辑精彩评论数据
    getAilumhotcomment() {
      axios
        .get(
          `http://127.0.0.1:3000/comment/album?id=${this.$route.params.id}&limit=${this.limit}&offset=${this.offset}`
        )
        .then((res) => {
          this.wonderfulList = res.data.hotComments;
        });
    },
    // 获取专辑最新评论数据
    getAilumnewcomment() {
      axios
        .get(
          `http://127.0.0.1:3000/comment/album?id=${this.$route.params.id}&limit=${this.limit}&offset=${this.offset}`
        )
        .then((res) => {
          this.totalcomment = res.data.total;
          this.newestList = res.data.comments;
        });
    },
    // 获取MV精彩评论数据
    getMVhotcomment() {
      axios
        .get(
          `http://127.0.0.1:3000/comment/mv?id=${this.$route.params.id}&limit=${this.limit}&offset=${this.offset}`
        )
        .then((res) => {
          
          this.wonderfulList = res.data.hotComments;
        });
    },
    // 获取MV最新评论数据
    getMVnewcomment() {
      axios
        .get(
          `http://127.0.0.1:3000/comment/mv?id=${this.$route.params.id}&limit=${this.limit}&offset=${this.offset}`
        )
        .then((res) => {
          this.totalcomment = res.data.total;
          this.newestList = res.data.comments;
        });
    },
    // 获取视频精彩评论数据
    getVideohotcomment() {
      axios
        .get(
          `http://127.0.0.1:3000/comment/video?id=${this.$route.params.id}&limit=${this.limit}&offset=${this.offset}`
        )
        .then((res) => {
          
          this.wonderfulList = res.data.hotComments;
        });
    },
    // 获取视频最新评论数据
    getVideonewcomment() {
      axios
        .get(
          `http://127.0.0.1:3000/comment/video?id=${this.$route.params.id}&limit=${this.limit}&offset=${this.offset}`
        )
        .then((res) => {
          this.totalcomment = res.data.total;
          this.newestList = res.data.comments;
        });
    },
    // 时间戳转换
    timestampToTime(timestamp) {
      var date = new Date(timestamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
      var M = date.getMonth() + "月";
      var D = date.getDate() + "日 ";
      var h = " " + date.getHours() + ":";
      var m = date.getMinutes();
      return M + D + h + m;
    },
    prev() {
      this.offset -= this.limit;
      this.qwe()
      // 锚点定位
      document.querySelector("#header").scrollIntoView({
        block: "center", // 上边框与视窗中部部平齐
      });
    },
    next() {
      this.offset += this.limit;
      this.qwe()
      // 锚点定位
      document.querySelector("#header").scrollIntoView({
        block: "center", // 上边框与视窗中部部平齐
      });
    },
    change(p) {
      this.offset = (p - 1) * this.limit;
      this.qwe()
      // 锚点定位
      document.querySelector("#header").scrollIntoView({
        block: "center", // 上边框与视窗中部部平齐
      });
    },

    qwe(){
      if (this.songSheet) {
      this.getsongSheetnewcomment();
    }
    if (this.song) {
      this.getsongnewcomment();
    }
    if(this.Album){
      this.getAilumnewcomment();
    }
    if(this.mvinfo){
      this.getMVnewcomment();
    }
    if(this.VideoInfo){
      this.getVideonewcomment();
    }
    }
  },
  created() {
    if (this.songSheet) {
      this.getsongSheethotcomment();
      this.getsongSheetnewcomment();
    }
    if (this.song) {
      this.getsonghotcomment();
      this.getsongnewcomment();
    }
    if(this.Album){
      this.getAilumhotcomment();
      this.getAilumnewcomment();
    }
    if(this.mvinfo){
      this.getMVhotcomment();
      this.getMVnewcomment();
    }
    if(this.VideoInfo){
      this.getVideohotcomment();
      this.getVideonewcomment();
    }
  },
};
</script>
<style scoped>
.comment {
  width: 100%;
}
.header {
  display: flex;
  align-items: flex-end;
  border-bottom: 2px solid #c20c0c;
  padding-bottom: 8px;
  margin-bottom: 20px;
}
.header span:nth-child(1) {
  font-size: 20px;
}
.header span:nth-child(2) {
  font-size: 12px;
  margin-left: 20px;
}
/* 发布评论 */
.publish {
  display: flex;
}
.publish .publish_left img {
  width: 50px;
  height: 50px;
}
.publish .publish_right {
  width: 100%;
  margin-left: 15px;
}
.publish .publish_right .top textarea {
  width: 100%;
  padding: 6px;
  resize: none;
  outline: none;
  font-size: 12px;
}
.publish .publish_right .bottom {
  display: flex;
  justify-content: space-between;
  padding-top: 10px;
}
.publish .publish_right .bottom .bottom_a span:nth-child(1) {
  font-size: 18px;
  color: #999999;
  cursor: pointer;
}
.publish .publish_right .bottom .bottom_a span:nth-child(2) {
  font-size: 20px;
  margin-left: 10px;
  color: #999999;
  cursor: pointer;
}
.publish .publish_right .bottom .bottom_b span:nth-child(1) {
  font-size: 12px;
  margin-right: 20px;
  color: #999999;
}
.publish .publish_right .bottom .bottom_b span:nth-child(2) {
  background-color: #3080cc;
  border: 1px solid #3b86cf;
  color: #fff;
  padding: 3px 10px;
  font-size: 12px;
  cursor: pointer;
  border-radius: 3px;
}
.publish .publish_right .bottom .bottom_b .switch {
  color: #c60c0c !important;
}
/* 精彩评论 */
.wonderful .wonderful_top {
  padding-bottom: 5px;
  font-weight: 700;
  font-size: 12px;
}
.wonderful .wonderful_bottom {
  border-top: 1px solid #cfcfcf;
  display: flex;
  padding: 15px 0;
}
.wonderful .wonderful_bottom .wonderful_bottom_left img {
  width: 50px;
  height: 50px;
}
.wonderful .wonderful_bottom .wonderful_bottom_right {
  width: 100%;
  margin-left: 15px;
}
.wonderful .wonderful_bottom .wonderful_bottom_right_a {
  font-size: 12px;
  color: "#333";
}
.wonderful .wonderful_bottom .wonderful_bottom_right_a span:nth-child(1) {
  margin-right: 5px;
  color: #0c73c2;
}
.wonderful .wonderful_bottom .wonderful_bottom_right_a span:nth-child(2) {
  margin-left: 5px;
}
.wonderful .wonderful_bottom .wonderful_bottom_right_b {
  font-size: 12px;
  color: #999999;
  margin-top: 18px;
  display: flex;
  justify-content: space-between;
}
.wonderful .wonderful_bottom .wonderful_bottom_right_b .a span {
  color: #666;
}
.wonderful .wonderful_bottom .wonderful_bottom_right_b .b {
  color: #666;
  cursor: pointer;
}
.wonderful .wonderful_bottom .wonderful_bottom_right_b .b span:nth-child(2) {
  margin-left: 5px;
}
.wonderful
  .wonderful_bottom
  .wonderful_bottom_right_b
  .b
  span:nth-child(1):hover {
  text-decoration: underline;
}
.wonderful
  .wonderful_bottom
  .wonderful_bottom_right_b
  .b
  span:nth-child(2):hover {
  text-decoration: underline;
}
/* 最新评论 */
.newest .newest_top {
  padding-bottom: 5px;
  font-size: 12px;
  font-weight: 700;
}
.newest .newest_bottom {
  border-top: 1px solid #cfcfcf;
  display: flex;
  padding: 15px 0;
}
.newest .newest_bottom .newest_bottom_left img {
  width: 50px;
  height: 50px;
}
.newest .newest_bottom .newest_bottom_right {
  width: 100%;
  margin-left: 15px;
}
.newest .newest_bottom .newest_bottom_right_a {
  font-size: 12px;
  color: "#333";
}
.newest .newest_bottom .newest_bottom_right_a span:nth-child(1) {
  margin-right: 5px;
  color: #0c73c2;
}
.newest .newest_bottom .newest_bottom_right_a span:nth-child(2) {
  margin-left: 5px;
}

.reply{
  border: 1px solid #dedede;
  background-color: #f4f4f4;
  font-size: 12px;
  padding: 8px 20px;
  margin-top: 10px;
}
.reply span:nth-child(1) {
  color: #0c73c2;
  margin-right: 5px;
}
.reply span:nth-child(2) {
  margin-left: 5px;
}
.newest .newest_bottom .newest_bottom_right_c {
  font-size: 12px;
  color: #999999;
  margin-top: 18px;
  display: flex;
  justify-content: space-between;
}
.newest .newest_bottom .newest_bottom_right_c .a span {
  color: #666;
}
.newest .newest_bottom .newest_bottom_right_c .b {
  color: #666;
  cursor: pointer;
}
.newest .newest_bottom .newest_bottom_right_c .b span:nth-child(2) {
  margin-left: 5px;
}
.newest .newest_bottom .newest_bottom_right_c .b span:nth-child(1):hover {
  text-decoration: underline;
}
.newest .newest_bottom .newest_bottom_right_c .b span:nth-child(2):hover {
  text-decoration: underline;
}
/* 分页 */
.pagination {
  display: flex;
  justify-content: center;
  margin: 20px 0;
}
</style>